/** 软件使用频率部件
 * Author:      huoxj 
 * CreateTime:  2023/2/5 20:36:33 
 * LastEditor:  huoxj 
 * ModifyTime:  2023/12/5 19:33:14 
 * Description: 
*/ 
<template>
  <div ref="echarsRef" :style="{ width: props.width, height: props.height }"> </div>
  <el-dialog
    v-model="open"
    center
    :title="null"
    :fullscreen="true"
    style="background: url('/admin/bg.png'); background-size: 100% auto; overflow: hidden"
  >
    <div ref="echarsDialog" style="width: 100%; height: 90vh"> </div>
  </el-dialog>
</template>
<script setup lang="ts">
  import { ref, Ref, reactive, watchEffect, onMounted, watch, nextTick } from 'vue';
  import { useECharts } from '/@/hooks/web/useECharts';
  import {defHttp} from "/@/utils/http/axios";

  const props = defineProps(['width', 'height', 'unit', 'software']);

  const echarsRef = ref<HTMLDivElement | null>(null);

  const { setOptions, echarts,getInstance: chartInstance } = useECharts(echarsRef as Ref<HTMLDivElement>, 'dark');

  const option = reactive({});

  function initCharts() {
    Object.assign(
      option,
      reactive({
        toolbox: {
          feature: {
            myTool2: {
              show: true,
              title: '点击全屏',
              icon: 'M145.066667 85.333333h153.6c25.6 0 42.666667-17.066667 42.666666-42.666666S324.266667 0 298.666667 0H34.133333C25.6 0 17.066667 8.533333 8.533333 17.066667 0 25.6 0 34.133333 0 42.666667v256c0 25.6 17.066667 42.666667 42.666667 42.666666s42.666667-17.066667 42.666666-42.666666V145.066667l230.4 230.4c17.066667 17.066667 42.666667 17.066667 59.733334 0 17.066667-17.066667 17.066667-42.666667 0-59.733334L145.066667 85.333333z m170.666666 563.2L162.133333 802.133333l-76.8 76.8V725.333333C85.333333 699.733333 68.266667 682.666667 42.666667 682.666667s-42.666667 17.066667-42.666667 42.666666v256c0 25.6 17.066667 42.666667 42.666667 42.666667h256c25.6 0 42.666667-17.066667 42.666666-42.666667s-17.066667-42.666667-42.666666-42.666666H145.066667l76.8-76.8 153.6-153.6c17.066667-17.066667 17.066667-42.666667 0-59.733334-17.066667-17.066667-42.666667-17.066667-59.733334 0z m665.6 34.133334c-25.6 0-42.666667 17.066667-42.666666 42.666666v153.6l-76.8-76.8-153.6-153.6c-17.066667-17.066667-42.666667-17.066667-59.733334 0-17.066667 17.066667-17.066667 42.666667 0 59.733334l153.6 153.6 76.8 76.8H725.333333c-25.6 0-42.666667 17.066667-42.666666 42.666666s17.066667 42.666667 42.666666 42.666667h256c25.6 0 42.666667-17.066667 42.666667-42.666667v-256c0-25.6-17.066667-42.666667-42.666667-42.666666z m0-682.666667h-256c-25.6 0-42.666667 17.066667-42.666666 42.666667s17.066667 42.666667 42.666666 42.666666h153.6l-76.8 76.8-153.6 153.6c-17.066667 17.066667-17.066667 42.666667 0 59.733334 17.066667 17.066667 42.666667 17.066667 59.733334 0l153.6-153.6 76.8-76.8v153.6c0 25.6 17.066667 42.666667 42.666666 42.666666s42.666667-17.066667 42.666667-42.666666v-256c0-25.6-17.066667-42.666667-42.666667-42.666667z',
              onclick: function () {
                /** 打开对话框 
                * Author:      yangjq 
                * CreateTime:  2023/12/5 19:40:58 
                * LastEditor:  yangjq 
                * ModifyTime:  2023/12/5 19:40:58 
                * Description: 
                */
                openDialog();
              },
            },
          },
          top: '3%',
          right: '5%',
        },

        title: {
          show: true,
          text: '{n|' + props.unit + '}{h|' + props.software + '}{n|使用频次}',
          textVerticalAlign: 'top',
          left: 'center',
          top: 16,
          textStyle: {
            overflow: 'truncate',
            ellipsis: '...',
            rich: {
              n: {
                color: 'rgba(255, 255, 255, 1)',
                fontSize: 17,
                textBorderWidth: '1',
              },
              h: {
                color: 'rgba(255, 0, 0, 1)',
                fontSize: 17,
                fontWeight: 'bold',
              },
            },
          },
        },
        backgroundColor: 'rgba(128, 128, 128, 0.1)', //rgba设置透明度0.1
        grid: {
          containLabel: true,
          left: 'center',
          top: 'center',
          width: '86%',
          height: '80%',
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          axisTick: {
            //x轴刻度相关设置
            alignWithLabel: true,
          },
          data: ['2023-01', '2023-02', '2023-03', '2023-04', '2023-05', '2023-06', '2023-07', '2023-08', '2023-09', '2023-10', '2023-11', '2023-12'],
        },
        yAxis: {
          type: 'value',
          name: '人次',
          nameLocation: 'center',
          nameGap: 20,
          nameRotate: 90,
          splitLine: { show: false },
          splitArea: {
            show: true,
          },
        },
        series: [
          {
            type: 'bar',
            name: '使用频次',
            data: [23, 24, 18, 25, 18,23, 24, 18, 25, 18,23, 24],
            itemStyle: {
              color: '#4992ff',
            },
          },
        ],
      })
    );
    setOptions(option,false);

  }

  function loadChartsData() {
    let params = {
      softwareName : props.software,
      place : props.unit
    }
    defHttp.get({url: "/software/usedFrequency", params}, {isTransformResponse: false}).then((res) => {
      if (res.success) {
        let opt = {
          title: {
            text: '{n|' + props.unit + '}{h|' + props.software + '}{n|使用频次}',
          },            
          xAxis: {
            data: res.result.monthList,
          },
          series: [
            {
              name: '使用频次',
              data: res.result.countList,
            },
          ],
        };
        setOptions(opt,false);
      } else {
        console.log("接口错误用默认")
      }
    })

  }
  const open = ref<boolean>(false);
  /** 打开对话框 
  * Author:      yangjq 
  * CreateTime:  2023/12/5 19:40:58 
  * LastEditor:  yangjq 
  * ModifyTime:  2023/12/5 19:40:58 
  * Description: 
  */
  function openDialog() {
    open.value = true;
    nextTick(() => {
      getInstanceDialog()?.resize();
    });
  }
  const echarsDialog = ref<HTMLDivElement | null>(null);

  const { setOptions: setOptions2, getInstance: getInstanceDialog } = useECharts(echarsDialog as Ref<HTMLDivElement>, 'dark');
  watchEffect(() => {
    props.unit && props.software && loadChartsData();
  });
  onMounted(() => {
    initCharts();
  });
  /**
   *监听unit
   */
  // watch(
  //   () => props.unit,
  //   () => {
  //     props.unit && props.software && initCharts();
  //   }
  // );
  /**
   *监听software
   */
  // watch(
  //   () => props.software,
  //   () => {
  //     props.unit && props.software && initCharts();
  //   }
  // );
</script>
<style></style>
